<template>
	<view>
		<form @submit="formSubmit" @reset="formReset" class="register-form-container">
			<view class="avatar">
				<uni-file-picker ref="avatar" v-model="imageValue" fileMediatype="image" mode="grid" @select="select"
					@progress="progress" @success="success" @fail="fail" limit="1" :auto-upload="false"
					:del-icon="false" :image-styles="imageStyles" :disable-preview="true" />
				<image src="../../static/avator_icons/pix-small.png" class="slot-icon"></image>
			</view>
			<view class="form-item ">
				<view class="title">姓名:</view>
				<input class="form-input" name="username" :value="userName" placeholder="请输入真实姓名" />
			</view>
			<view class="form-item ">
				<view class="title">手机号码:</view>
				<!-- <input class="form-input" name="input" placeholder="" /> -->
				<button class="form-phone" open-type="getPhoneNumber"
					@getphonenumber="decryptPhoneNumber">{{phone_num}}</button>
			</view>
			<view class="form-item">
				<button class="form-btn" form-type="submit">{{btn_title}}</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		name: "register-form",
		props: {
			btn_title: {
				type: String,
				default: "完成"
			}
		},
		data() {
			return {
				userName: '',
				phone_num: '请授权手机号',
				imageStyles: {
					width: "204rpx",
					height: "221rpx",
					border: {
						color: "#ffffff",
						width: 1,
						style: '',
						radius: '70rpx'
					},
				},
				imageValue: {
					// name: "file.txt",
					// extname: "txt",
					url: "/static/avator_icons/avator-default.png",
				},
				avator:''
			};
		},
		methods: {
			// 获取上传状态
			select(e) {
				uni.uploadFile({
					url: 'http://note.zjut.club/file/upload', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'file',
					formData: {
						'fileType': 1
					},
					file: e.tempFiles[0],
				
					success: (res) => {
						console.log(res.data);
						const temp = JSON.parse(res.data)
						const avatorSrc = uni.$http.baseURL + '/file/download?fileId=' + temp.body.fileId
						console.log(avatorSrc)
						this.avator=avatorSrc
						store.dispatch('user/setAVATOR',avatorSrc)
					}
				});
			},
			formSubmit: function(e) {
				const formData = e.detail.value
				// formData.phone = this.phone_num
				formData.phone = '12345678912'
				formData.userType = '1'
				formData.wxId = uni.getStorageSync('openId')
				formData.password=''
				formData.avator = this.imageValue.url
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(formData))
				// uni.showModal({
				// 	content: '表单数据内容：' + JSON.stringify(formData),
				// 	showCancel: false
				// });
				this.pushData(formData)
				if (this.btn_title === "下一页") {
					//TODO:调用注册会员接口
					this.$emit("nextpage")
				}
				if (this.btn_title === "完成") {
					//TODO:调用注册游客接口
					uni.switchTab({
						url: "/pages/home/home"
					})

				}
			},
			async pushData(form) {
				const res = await uni.$http.post(uni.$http.baseURL + '/user/login', form)
				console.log(res)
			},
			formReset: function(e) {
				console.log('清空数据')
			},
			async decryptPhoneNumber(e) {
				const {
					data: res
				} = await uni.$http.get(uni.$http.baseURL + '/user/getPhoneByCode', {
					code: e.detail.code
				})
				if (res.body) this.phone_num = res.body
				// console.log(res.body)

			}
		}
	}
</script>

<style lang="scss">
	.register-form-container {
		display: flex;
		flex-direction: column;
	}

	.avatar {
		margin-left: 273rpx;
		margin-right: 273rpx;
		margin-top: 150rpx;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;

		.slot-icon {
			height: 50rpx;
			width: 50rpx;
			margin-right: 7rpx;
			margin-bottom: 22rpx;
			position: absolute;
		}
	}

	.form-item {
		margin-top: 40rpx;
		padding-left: 95rpx;
		padding-right: 95rpx;

		.title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 30rpx;
		}

		.form-input {
			padding-left: 60rpx;
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 44rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
		}

		.form-btn {
			color: #FFFFFF;
			height: 88rpx;
			margin-top: 100rpx;
			background: linear-gradient(90deg, #E62129 0%, #BA000A 100%);
			box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 44rpx;
		}

		.form-phone {
			height: 88rpx;
			box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 44rpx;
		}
	}
</style>
